"use client";
import NavBar from "@/app/components/NavBar";
import Footer from "@/app/components/Footer";
import CategrayGrid from "@/app/components/CategrayGrid";
import { useState, useEffect } from "react";
import { CategoryItem } from "@/app/types/video";

export default function CategoriesPage() {
  const [category, setCategory] = useState<CategoryItem[]>([]);
  useEffect(() => {
    fetch(`/api/categories`)
      .then((res) => res.json())
      .then((data) => {
        setCategory(data.data);
      });
  }, []);

  return (
    <div className="min-h-screen">
      <NavBar />
      <main className="mx-auto w-full max-w-6xl px-4 py-6">
        <h1 className="mb-4 text-2xl font-semibold">分类</h1>
        <CategrayGrid categraies={category} />
      </main>
      <Footer />
    </div>
  );
}
